<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:200px;height:40px;line-height:40px;margin: 50px auto;}
        .box span{display: block;height:40px;border: solid 1px black;}
        .box ul{margin: 0;padding:0;list-style: none;border:solid 1px black;border-top:none;display: none;}
        .box ul li{text-indent: 4px;display: flex;}
        .box ul li.hover{background: #66f;color: #fff;}
        .box ul li#active::after{content:"*";margin-left: auto;margin-right: 20px;}
    </style>
</head>
<body>
    <select>
        <option>上海</option>
        <option>杭州</option>
        <option>南京</option>
        <option>苏州</option>
        <option>北京</option>
        <option>深圳</option>
        <option>广州</option>
    </select>
    <div class="box">
        <span></span>
        <ul>
            <li>上海</li>
            <li>杭州</li>
            <li>南京</li>
            <li>苏州</li>
            <li>北京</li>
            <li>深圳</li>
            <li>广州</li>
        </ul>
    </div>
    <script>
        // 模拟下拉菜单
        var span = document.querySelector('.box span')
        var ul = document.querySelector('.box ul')
        var li = ul.children
        // console.log(li)

        var index = 0
        
        span.innerText = li[index].innerText
        li[index].id = 'active'

        var flag = 0

        span.onclick = function(e){
            var e = e || window.event
            e.stopPropagation()
            if(flag == 0){
                ul.style.display = 'block'
                flag = 1
            }else{
                ul.style.display = 'none'
                flag = 0
            }
        }

        document.onclick = function(){
            ul.style.display = 'none'
            flag = 0
        }

        for(var i = 0;i < li.length; i++ ){
            li[i].index = i
            li[i].onmouseover = function(){
                if(keyindex!=undefined){
                    li[keyindex].className = ''
                }
                this.className = 'hover'
                keyindex = this.index
            }
            li[i].onmouseout = function(){
                // this.className = ''
                li[keyindex].className = ''
                keyindex = undefined
            }
            li[i].onclick = function(){
                span.innerText = this.innerText
                li[index].id = ''
                this.id = 'active'
                index = this.index
            }
        }

        var keyindex

        document.onkeydown = function(e){
            if(flag == 0) return
            if(e.keyCode == 38){
                if(keyindex == undefined){
                    keyindex = li.length-1
                }else if(keyindex == 0){
                    keyindex = 0
                }else{
                    keyindex--
                }
                setkeyhover(keyindex)
            }
            if(e.keyCode == 40){
                if(keyindex == undefined){
                    keyindex = 0
                }else if(keyindex == li.length-1){
                    keyindex = li.length-1
                }else{
                    keyindex++
                }
                setkeyhover(keyindex)
            }

            if(e.keyCode == 13){
                span.innerText = li[keyindex].innerText
                li[index].id = ''
                li[keyindex].id = 'active'
                index = keyindex
                ul.style.display = 'none'
                flag = 0
            }
        }


        function setkeyhover(now){
            for(var i=0;i<li.length;i++){
                li[i].className = ''
            }
            li[now].className = 'hover'
        }
    </script>
</body>
</html>